<template>
  <top></top>
  <div id="Content">
    <div id="Catalog">
  <span v-if="errorMsg !== null">
    <p style="color: red">{{errorMsg}}</p>
  </span>

      <form method="post" @submit.prevent="checkErr">

        <h2>Delivery Address</h2>

        <!--之前的选项卡不需要了-->
<!--        <table>-->
<!--          <tr>-->
<!--            <td id="AddressInfo">AddressInfo</td>-->
<!--            <td id="DetailInfo">DetailInfo</td>-->
<!--          </tr>-->
<!--        </table>-->

        <table id="AddressTable">
          <tr>
            <td><b>Receiver Address</b></td>
            <td>
              <input type="text" name="receiverAddress" v-model="receiverAddress">
            </td>
          </tr>
          <tr>
            <td><b>Receiver Name</b></td>
            <td>
              <input type="text" name="receiverName" v-model="receiverName">
            </td>
          </tr>
          <tr>
            <td><b>Receiver Phone</b></td>
            <td>
              <input type="text" name="receiverPhone" v-model="receiverPhone">
            </td>
          </tr>
          <tr>
            <td><b>Order Payment</b></td>
            <td>
              <input type="text" name="orderPayment" v-model="orderPayment">
            </td>
          </tr>
          <tr>
            <td><b>Notes</b></td>
            <td>
              <input type="text" name="notes">
            </td>
          </tr>
        </table>

<!--        <table id="DetailTable" HIDDEN="hidden">-->
<!--          <tr>-->
<!--            <td><b>Phone Number</b></td>-->
<!--            <td>-->
<!--              <input type="text" name="phoneNumber">-->
<!--            </td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td><b>Bill Country</b></td>-->
<!--            <td>-->
<!--              <input type="text" name="billCountry">-->
<!--            </td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td><b>Ship Time</b></td>-->
<!--            <td>-->
<!--              <input type="text" name="shipTime">-->
<!--            </td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td><b>Zip</b></td>-->
<!--            <td>-->
<!--              <input type="text" name="zip">-->
<!--            </td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td><b>CreditCard</b></td>-->
<!--            <td>-->
<!--              <input type="text" name="creditCard">-->
<!--            </td>-->
<!--          </tr>-->
<!--        </table>-->

        <h2>Cart List</h2>
        <table>
          <tr>
            <th><b>Item ID</b></th>
            <th><b>Product ID</b></th>
            <th><b>Description</b></th>
            <th><b>In Stock?</b></th>
            <th><b>Quantity</b></th>
            <th><b>List Price</b></th>
            <th><b>Total Cost</b></th>
          </tr>

          <tr v-for="cartItem in cartList" :key="cartItem.itemId">
            <td>{{cartItem.itemId}}</td>
            <td>{{cartItem.productId}}</td>
            <td>{{cartItem.productNameChinese}}</td>
            <td>{{cartItem.itemStock}}</td>
            <td>{{cartItem.quantity}}</td>
            <td>{{cartItem.itemPrice}}</td>
            <td>{{cartItem.quantity * cartItem.itemPrice}}</td>
          </tr>
        </table>

        <table>
          <tr>
            <td><b>TOTAL COST:</b></td>
            <td>{{getTotalCost}}</td>
            <td><input type="submit" value="ORDER NOW!"></td>
          </tr>
        </table>

      </form>
    </div>
  </div>
<bottom></bottom>
</template>

<script>
import Top from "@/App.vue";
import Bottom from "@/App.vue";
import axios from "axios";

export default {
  name: "newOrder",
  components: {Bottom, Top},
  data(){
    return{
      errorMsg:"",

      receiverName: "",
      receiverPhone: "",
      receiverAddress: "",
      orderPayment: "",
      cartList: []
    }
  },
  methods:{
    newOrderUpdate(){
      //post订单
      axios({
        method: "post",
        url: "http://localhost:8080/jpetstore/order",
        data: {
          receiverName: this.username,
          receiverPhone: this.password,
          receiverAddress: this.rePassword,
          orderPayment:this.orderPayment,
          cartList:this.cartList
        },
      })
          .then((r) => {
            if (r.data.data === "订单创建成功") {
              // console(this.password);
              this.errorMsg = "";

              //库存-1 ！！接口未实现！！
              //TODO 实现减少库存接口

              //清空购物车
              this.clearCart();

              //跳转页面
              this.$router.push("/orderSuccess");
            } else {
              //错误信息
              // console(this.password);
              // this.errorMsg = r.data.data;
            }
          })
          .catch((r) => {
            console.error("err when post order",r);
          });

    },
    checkErr(){
      //检测填写信息的正确性
        if(this.receiverPhone==""||this.receiverName==""||this.receiverAddress==""||this.orderPayment==""){
          this.errorMsg = "请填写订单信息！";
        }else {
          this.errorMsg = "";
        }
        if(this.errorMsg == ""){
          this.newOrderUpdate();
        }
    },
    getCartList(){
      axios.get("http://localhost:8080/jpetstore/cart")
          .then((r) => {
            this.cartList = r.data.data;
          })
          .catch(err => {
            console.error("err when get cartList", err);
          });
    },
    clearCart(){
      //清空购物车并更新购物车列表
      for(let cartItem of this.cartList){
        axios.delete("http://localhost:8080/jpetstore/cart/"+cartItem.itemId.toString());
      }
      this.getCartList();
    }
  },
  mounted() {
    this.getCartList();
  },
  computed:{
    getTotalCost(){
      var totalCost = 0;
      for(let cartItem of this.cartList){
        totalCost += cartItem.quantity * cartIte.quantity;
      }
      return totalCost;
    }
  }
}
</script>

<style scoped>
</style>